<template>
	<div class="regPhone_page layer">
		<!-- <van-nav-bar :title="$t('reg.titleP')" left-arrow @click-left="$router.go(-1)" :border="false"
			:right-text="$t('reg.titleE')" @click-right="$router.replace('/regEmail')" /> -->
		<van-nav-bar :title="$t('reg.titleP')" left-arrow @click-left="$router.go(-1)" :border="false"/>
		<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="dark-ruleForm"
			label-position="top" hide-required-asterisk>
			<el-form-item :label="$t('account')" prop="account">
				<el-input v-model="ruleForm.account" :placeholder="$t('login.accountVerify')"
					@input="(val) => ruleForm.account = val.replace(/[^A-Za-z0-9]/g,'' )" maxlength="20">
					<img src="@/assets/images/login/acc.png" slot="prefix" class="icon" />
				</el-input>
			</el-form-item>
			<div class="sw_but">
				<span class="cur_p" :class="regType == 1 ? 'active' : ''" @click="changeRegType(1)">{{$t('reg.bindP')}}</span>
				<span class="cur_p" :class="regType == 2 ? 'active' : ''" @click="changeRegType(2)">{{$t('reg.bindE')}}</span>
			</div>
			<el-form-item :label="$t('phone')" prop="username" v-if="regType == 1">
				<el-input v-model="ruleForm.username" :placeholder="$t('login.phoneNumber')" :class="'phone_input'"
					@input="(val) => ruleForm.username = val.replace(/[^0-9]/g,'' )">
					<div slot="prefix" class="flex_prefix">
						<img src="@/assets/images/login/phone.png" class="icon" />
						<div class="area_code" @click="showAreaCode = !showAreaCode">
							<span>{{ruleForm.area_code}}</span>
							<i class="el-icon-caret-bottom"></i>
						</div>
					</div>
				</el-input>
			</el-form-item>
			<el-form-item :label="$t('email')" prop="username" v-else>
				<el-input v-model="ruleForm.username" :placeholder="$t('login.email')">
					<img src="@/assets/images/login/emil.png" slot="prefix" class="icon" />
				</el-input>
			</el-form-item>
			<el-form-item :label="$t('forgot.smsCode')" prop="code">
				<el-input v-model="ruleForm.code" :placeholder="$t('forgot.smsCode')">
					<img src="@/assets/images/login/smsCode.png" slot="prefix" class="icon" />
					<div class="downtime" :style="dwonCodeText ? 'color: #fff' : ''" @click="handleSms" slot="suffix">
						{{dwonCodeText ? dwonCodeText : codeText}}
					</div>
				</el-input>
			</el-form-item>
			<el-form-item :label="$t('forgot.newPas')" prop="password">
				<el-input v-model="ruleForm.password" :placeholder="$t('login.password')"
					:type="showPaw1 ? 'text' : 'password'">
					<img src="@/assets/images/login/paw.png" slot="prefix" class="icon" />
					<img :src="require(`@/assets/images/login/${showPaw1 ? 'hide' : 'show'}.png`) " slot="suffix" class="paw_icon"
						@click="showPaw1 = !showPaw1" />
				</el-input>
			</el-form-item>
			<p class="paw_tips">{{$t('login.pasValidate')}}</p>
			<el-form-item :label="$t('forgot.confirmPas')" prop="password2">
				<el-input v-model="ruleForm.password2" :placeholder="$t('login.password')"
					:type="showPaw2 ? 'text' : 'password'">
					<img src="@/assets/images/login/paw.png" slot="prefix" class="icon" />
					<img :src="require(`@/assets/images/login/${showPaw2 ? 'hide' : 'show'}.png`) " slot="suffix" class="paw_icon"
						@click="showPaw2 = !showPaw2" />
				</el-input>
			</el-form-item>
			<el-form-item :label="$t('reg.inviteCode')">
				<el-input v-model="ruleForm.invite_code" :placeholder="$t('reg.inviteCode')">
					<img src="@/assets/images/login/paw.png" slot="prefix" class="icon" />
				</el-input>
			</el-form-item>
		</el-form>
		<div class="agreement_box">
			<el-checkbox v-model="checked">{{$t('login.readAgreed')}}<span style="color: #0DF5E3;"
					@click="$router.push('/userAgreement')">{{$t('userAgreement.title')}}</span></el-checkbox>
		</div>
		<el-button class="submit_but" @click="submit">{{$t('submit')}}</el-button>
		<div class="goReg" @click="$router.replace('/login')">
			{{$t('reg.account')}}？<span>{{$t('reg.toLogin')}}</span>
		</div>
		<AreaCode v-if="showAreaCode" v-model="showAreaCode" @change="(val) => ruleForm.area_code = val" />
	</div>
</template>

<script>
	import AreaCode from '@/components/areaCode.vue'
	import Cookie from 'vue-cookies'
	import {
		userRegister,
		smsSend,
		emsSend
	} from '@/api/home.js'
	export default {
		components: {
			AreaCode,
		},
		data() {
			return {
				intimer: null,
				dwonCodeText: '',
				showPaw1: false,
				showPaw2: false,
				showAreaCode: false,
				checked: false,
				regType: 1,
				isError: false,
				ruleForm: {
					account: '',
					area_code: '1',
					username: '',
					code: '',
					password: '',
					password2: '',
					invite_code: ''
				},
			}
		},
		computed: {
			codeText: {
				get() {
					return this.$t('forgot.get')
				},
				set(val) {
					// console.log('val', val);
					return val
				}
				// return this.$t('message.get')
			},
			rules() {
				var validatePass = (rule, value, callback) => {
					var reg = /^(?![a-zA-Z]+$)(?![0-9]+$)[0-9A-Za-z]{8,20}$/
					if (value === '') {
						callback(new Error(this.$t('login.password')))
					} else if (!reg.test(value)) {
						callback(new Error(this.$t('forgot.passValidate')))
					} else {
						callback()
					}
				}
				var validatePass2 = (rule, value, callback) => {
					if (value === '') {
						callback(new Error(this.$t('forgot.password2')))
					} else if (value !== this.ruleForm.password) {
						callback(new Error(this.$t('forgot.twicePassword2')))
					} else {
						callback()
					}
				}
				let obj = {
					account: [{
						required: true,
						message: this.$t('login.accountVerify'),
						trigger: 'change'
					}, {
						min: 8,
						max: 20,
						message: this.$t('login.accountVerifyLen'),
						trigger: 'blur'
					}],
					username: [{
						required: true,
						message: this.$t('login.phoneNumber'),
						trigger: 'change'
					}],
					password: [{
						required: true,
						validator: validatePass,
						trigger: 'blur'
					}],
					code: [{
						required: true,
						message: this.$t('forgot.verification'),
						trigger: 'change'
					}],
					password2: [{
						required: true,
						validator: validatePass2,
						trigger: 'blur'
					}]
				}

				if (this.regType == 2) {
					obj.username = [{
						required: true,
						message: this.$t('login.email'),
						trigger: 'change'
					}, {
						type: 'email',
						message: this.$t('login.correctEmail'),
						trigger: ['blur', 'change']
					}]
				}

				return obj
			}
		},
		watch: {},
		mounted() {
			if (this.$route.query.invite_code) {
				sessionStorage.setItem('invite_code', this.$route.query.invite_code)
				this.ruleForm.invite_code = this.$route.query.invite_code
			} else {
				let invite_code = sessionStorage.getItem('invite_code');
				this.ruleForm.invite_code = invite_code || ''
			}
		},
		methods: {
			async handleSms() {
				this.$refs.ruleForm.validateField(['username', 'account'], async (valid) => {
					if (valid) {
						this.isError = true
					}else {
						this.isError = false
					}
				})
				if (this.isError) return
				if (this.intimer) return
				let res;
				// console.log('1111', this.regType, this.ruleForm.account, this.ruleForm.username);
				if (this.regType == 1) {
					// console.log('ppppppp', {
					// 	account: this.ruleForm.account,
					// 	mobile: this.ruleForm.username,
					// 	event: 'register',
					// 	area_code: this.ruleForm.area_code
					// });
					res = await smsSend({
						account: this.ruleForm.account,
						mobile: this.ruleForm.username,
						event: 'register',
						area_code: this.ruleForm.area_code
					})
				} else {
					// console.log('eeeeee', {
					// 	account: this.ruleForm.account,
					// 	email: this.ruleForm.username,
					// 	event: 'register'
					// });
					res = await emsSend({
						account: this.ruleForm.account,
						email: this.ruleForm.username,
						event: 'register'
					})
				}
				// console.log('res', res);
				if (res && res.code == 1) {
					let time = 60
					this.codeText = '60s'
					this.intimer = setInterval(() => {
						this.dwonCodeText = (--time) + 's'
						if (time <= 0) {
							clearInterval(this.intimer)
							this.intimer = null
							this.dwonCodeText = '';
							this.codeText = this.$t('forgot.get')
						}
					}, 1000)
					this.$toast.success(res.msg)
				} else {
					this.$toast.fail(res.msg)
				}
			},
			async submit() {
				this.$refs.ruleForm.validate(async (valid) => {
					if (valid) {
						if (!this.checked) {
							this.$toast.fail(this.$t('login.agreed'))
							return
						}
						const res = await userRegister({
							// ...this.ruleForm,
							// type: 'mobile'
							account_1h328Kln: this.ruleForm.account,
							area_code: this.ruleForm.area_code,
							username_bYh48Kln: this.ruleForm.username,
							password_Pe0IvA0I: this.ruleForm.password,
							code_hiQBYGP0: this.ruleForm.code,
							invite_code_cyGRGIw9: this.ruleForm.invite_code,
							type_PzIhdyWz: this.regType == 1 ? 'mobile' : 'email'
						})
						// console.log('res', res);
						if (res && res.code == 1) {
							this.$store.commit('onChangeUserInfo', res.data.userinfo)
							this.$router.replace('/')
							this.$toast.success(res.msg)
						} else {
							this.$toast.fail(res.msg)
						}
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			changeRegType(type) {
				this.regType = type
				this.ruleForm.username = ''
				this.$nextTick(() => {
					this.$refs.ruleForm.clearValidate()
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.regPhone_page {
		min-height: 100vh;
		padding-bottom: 20px;

		.downtime {
			color: #0DF5E3;
			font-size: 14px;
		}

		.sw_but {
			display: flex;
			align-items: center;
			margin-bottom: 20px;
			font-size: 16px;
			color: #999;

			span {
				margin-right: 30px;
			}

			.active {
				color: #fff;
			}
		}

		.paw_tips {
			margin-bottom: 20px;
			font-size: 12px;
			text-align: left;
		}

		.agreement_box {
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 14px;
			margin-top: 30px;

			::v-deep .el-checkbox {
				color: #fff;
			}

			::v-deep .el-checkbox__inner {
				border-color: #fff;
			}

			::v-deep .el-checkbox__inner {
				background-color: transparent;
			}

			::v-deep .is-checked {
				.el-checkbox__inner {
					border-color: transparent !important;
				}
			}

			::v-deep .el-checkbox__input.is-checked+.el-checkbox__label {
				color: #fff;
			}

			::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
				background-color: #0DF5E3;
			}

			::v-deep .el-checkbox__inner::after {
				border-color: #333;
			}
		}

		.submit_but {
			margin-top: 30px;
		}

		.goReg {
			position: relative;
			// bottom: 20px;
			left: 50%;
			transform: translateX(-50%);
			font-size: 14px;
			color: #999;

			span {
				color: #0DF5E3;
			}
		}
	}
</style>